<section id="input"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Input</h2>
    <a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-col gap-y-4">
      <input type="text" class="input" placeholder="Text">
      <input type="text" class="input" disabled placeholder="Disabled">
      <input type="text" class="input" aria-invalid="true" placeholder="Error">
      <input type="email" class="input" placeholder="Email">
      <input type="password" class="input" placeholder="Password">
      <input type="number" class="input" placeholder="Number">
      <input type="file" class="input">
      <input type="tel" class="input" placeholder="Tel">
      <input type="url" class="input" placeholder="URL">
      <input type="search" class="input" placeholder="Search">
      <input type="date" class="input">
      <input type="datetime-local" class="input">
      <input type="month" class="input">
      <input type="week" class="input">
      <input type="time" class="input">
    </div>
  </div>
</section>